<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <link rel="stylesheet" href="./font-day01/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .big {
            width: 1000px;
            position: absolute;
            left: 0;
            right: 0;
            margin: auto;
        }

        thead td {
            width: 200px;
            height: 50px;
        }

        thead tr {
            background-color: #fafafa;
        }

        tbody tr td img {
            width: 100px;
            height: 100px;
        }

        tfoot td {
            height: 50px;
        }

        .num {
            width: 40px;
            height: 20px;
            padding-left: 15px;
            border: 0;
            border-top: 1px solid #999;
            border-bottom: 1px solid #999;
        }

        .jia,
        .jian {
            width: 20px;
            height: 20px;
        }

        .sc {
            width: 40px;
            height: 25px;
            background-color: red;
            color: #fff;
            border: 0;
        }

        tfoot tr td span {
            font-size: 25px;
            margin-right: 15px;
            color: #ff69b4;
        }

        tfoot tr td button {
            width: 70px;
            height: 30px;
            background-color: #3f85ed;
            color: #fff;
            border: 0;
        }
    </style>
</head>

<body>
    <div class="big">
        <p><span class="iconfont icon-xiangsufeng_fangzi"></span>/<span>购物车</span></p>
        <table cellspacing="0">
            <thead align="center">
                <tr>
                    <td>选中</td>
                    <td>图片</td>
                    <td>单价</td>
                    <td>个数</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody align="center"></tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="padding-left: 75px;"><input type="checkbox" onclick="qx(this)"
                            class="qx">&emsp13;全选</td>
                    <td colspan="2" align="center">总价: <b>¥<span>42.00</span></b> <button>结算(<a>12</a>)</button></td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>

</html>
<script>
    var tbody = document.querySelector('tbody')
    var tfoot = document.querySelector('tfoot')
    var zj = document.querySelector('tfoot tr td span')
    var qxk = document.querySelector('tfoot tr td .qx')
    var zs = document.querySelector('tfoot tr td a')
    var qxk = document.querySelector('.qx')
    var jg = 0
    var zsl = 0
    var data = [
        {
            status:1,
            src: './img/榴莲.png',
            dj: 6,
            gs: 2,
        },
        {
            status:0,
            src: './img/火龙果.png',
            dj: 20,
            gs: 7,
        },
        {
            status:0,
            src: './img/荔枝.png',
            dj: 9,
            gs: 3,
        },
        {
            status:1,
            src: './img/鸭梨.png',
            dj: 8,
            gs: 5,
        },
        {
            status:0,
            src: './img/樱桃.png',
            dj: 15,
            gs: 6,
        },
    ]
    function sj() {
        tbody.innerHTML = ''
        for (i = 0; i < data.length; i++) {
            var tr = document.createElement('tr')
            if (data[i].status == 1) {
                tr.innerHTML = `
        <td><input type="checkbox" class='fxk' onclick='xz(this,${i})'  checked></td>
        <td><img src="${data[i].src}" alt=""></td>
        <td>${data[i].dj}</td>
        <td><button class="jian" onclick='jian(${i})'>-</button><input class="num" type="text" value="${data[i].gs}"><button class="jia" onclick='jia(${i})'>+</button></td>
        <td>${(data[i].dj * data[i].gs).toFixed(2)}</td>
        <td><button class="sc" onclick='sc(this,${i})'>删除</button></td>
        `
            } else {
                tr.innerHTML = `
        <td><input type="checkbox" class='fxk' onclick='xz(this,${i})'></td>
        <td><img src="${data[i].src}" alt=""></td>
        <td>${data[i].dj}</td>
        <td><button class="jian" onclick='jian(${i})'>-</button><input class="num" type="text" value="${data[i].gs}"><button class="jia" onclick='jia(${i})'>+</button></td>
        <td>${(data[i].dj * data[i].gs).toFixed(2)}</td>
        <td><button class="sc" onclick='sc(this,${i})'>删除</button></td>
        `
        }
        tbody.appendChild(tr)
        }
    }
    sj()
    function jian(aa) {
        if (data[aa].gs > 1) {
            data[aa].gs--
        } else {
            data[aa].gs = 1
        }
        sj()
    }
    function jia(a) {
        data[a].gs++
        sj()
    }
    function sc(b, i) {
        var jg = zj.innerHTML
        var zjg = zs.innerHTML
        data.splice(i,1)
        // tbody.removeChild(b.parentNode.parentNode)
        jg = data[i].dj * data[i].gs
        zjg = (zj.innerHTML -= jg) - 0
        zj.innerHTML = zjg.toFixed(2)
        zs.innerHTML -= data[i].gs
        sj()
    }
    function qx(a) {
        var fxk = document.querySelectorAll("tbody tr td .fxk")
        for (i = 0; i < fxk.length; i++) {
            if (a.checked == true) {
                fxk[i].checked = true
            } else {
                fxk[i].checked = false
            }
        }
        kjxz()
    }
    var fxk = document.querySelectorAll("tbody tr td .fxk")
    function kjxz() {
        var jgg = 0
        var sll = 0
        for (i = 0; i < fxk.length; i++) {
            if (fxk[i].checked == true) {
                jgg += data[i].dj * data[i].gs
                sll += data[i].gs
                console.log(i);
            }
        }
        console.log(jgg);
        zj.innerHTML = jgg.toFixed(2)
        zs.innerHTML = sll
    }
    kjxz()
    function xz(b, i) {
        var jg = zj.innerHTML - 0
        var zsl = zs.innerHTML - 0
        if (b.checked == true) {
            jg += data[i].dj * data[i].gs
            zsl += data[i].gs
        } else {
            jg -= data[i].dj * data[i].gs
            zsl -= data[i].gs
        }
        zj.innerHTML = jg.toFixed(2)
        zs.innerHTML = zsl
        var fxk = document.querySelectorAll("tbody tr td .fxk")
        for (i = 0; i < fxk.length; i++) {
            var a = document.querySelectorAll('tbody tr td .fxk:checked')
            if (a.length == fxk.length) {
                qxk.checked = true
            } else {
                qxk.checked = false
            }
        }
    }
</script>